<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-08-26 14:49:02
 * @Description:
-->
<template>
  <div v-if="column.display">
    <van-field
            clickable
            :name="column.prop"
            input-align="right"
            right-icon="arrow"
            v-model="currentValue"
            :label="column.label"
            :placeholder="
        column.placeholder ? column.placeholder : '请选择' + column.label"
            :disabled="column.disabled"
            :required="column.required"
            :style="
        column.readonly || column.disabled || column.detail ? 'pointer-events: none;': ''"
            :rules="[{ required: column.required }]"
            @click="show1 = true"
            readonly
    />
    <van-popup v-model:show="show1"  round position="bottom">
      <van-date-picker
              v-model="time1"
              title="选择开始日期"
              :min-date="column.minDate"
              :max-date="column.maxDate"
              @cancel="cancelDatetime1"
              @confirm="confirmDatetime1"
      />



    </van-popup>

    <van-popup v-model:show="show2"  round position="bottom">
      <van-date-picker
              v-model="time2"
              title="选择结束日期"
              :min-date="minDate"
              :max-date="column.maxDate"
              @cancel="cancelDatetime2"
              @confirm="confirmDatetime2"
      />
    </van-popup>
  </div>
</template>

<script>
  import mixEvent from './mixins/mixEvent';
  import { formatDateToVants,formatToDateVants} from '@/framework-core/utils/util'
  export default {
    name: "avant-daterange",
    props: ['column','modelValue'],
    inject: ['getViewFormData'],
    mixins: [mixEvent],
    data() {
      return {
        show1: false,
        show2: false,
        times:["",""]
      };
    },
    created() {

    },

    mounted(){

      if( this.getViewFormData){
        this.formData = this.getViewFormData()
      }
    },
    computed: {
      minDate() {
        debugger
        if (!this.column.minDate) {
          return this.times[0]?new Date(this.times[0]):null;
        }
        if (!this.times[0]) {
          return this.column.minDate
        }
        return this.column.minDate < new Date(this.times[0]) ? this.column.minDate : new Date(this.times[0]);
      },

      columnsType () {
        return  this.column.dateType
      },
      currentValue () {
        if (this.modelValue) {
          if(this.modelValue.indexOf("[")>=0){
            this.times = JSON.parse(this.modelValue);
          }else{
            this.times = this.modelValue.split(",");
          }

        }
        if (!this.times || this.times.length == 0) {
          this.times = ["", ""];
        }
        if (this.times.length == 1) {
          this.times.push("");
        }
        return this.times[0] + "至" + this.times[1];
      },

      time1(){
        debugger
        return formatToDateVants(this.times[0],this.column.dateformat);
      },

      time2(){
        return formatToDateVants(this.times[1],this.column.dateformat);
      }
    },



    methods: {

      /**
       * @description: 关闭时间弹窗
       * @param {*}
       * @return {*}
       */
      cancelDatetime1() {
        this.show1 = false;
      },

      /**
       * @description: 时间选择确认
       * @param {*} value
       * @return {*}
       */
      confirmDatetime1(value) {

        let timeTemp =formatDateToVants(value.selectedValues,this.column.dateformat);
        this.times[0] = timeTemp;
        this.$emit('update:modelValue', JSON.stringify(this.times));
        this.bindCalculatorEvent(this.column,JSON.stringify( this.times));
        this.show1 = false;
        this.show2 = true;
      },


      /**
       * @description: 关闭时间弹窗
       * @param {*}
       * @return {*}
       */
      cancelDatetime2() {
        this.show2 = false;
      },

      /**
       * @description: 时间选择确认
       * @param {*} value
       * @return {*}
       */
      confirmDatetime2(value) {
        let timeTemp =formatDateToVants(value.selectedValues,this.column.dateformat);
        this.times[1] = timeTemp;
        this.$emit('update:modelValue', JSON.stringify( this.times));
        this.bindCalculatorEvent(this.column,JSON.stringify( this.times));
        this.show2 = false;
      },
    },
  };
</script>

<style scoped>

</style>
